<script setup lang='ts'>
import { onMounted } from 'vue';

// defineProps<{
//     name: string,
//     age?: number
// }>()
const { age = 10 } = defineProps<{
    name: string,
    age?: number,
    fun?: (a: number) => void
}>()
// const peopsItem = withDefaults(defineProps<{
//     name: string,
//     age?: number
// }>(), {
//     name: '李四',
//     age: 30
// })

onMounted(() => {
    // console.log(peopsItem.age + peopsItem.name);
    console.log(age);

})
const emits = defineEmits<{
    "updateAge": [a: number]
}>()

// const toAge = () => {
//     emits('updateAge', age + 1)
// }


</script>

<template>
    <div>
        <h2>子组件</h2>
        <p>姓名：{{ name }}</p>
        <p>年龄：{{ age }}</p>
        <button @click="fun(age + 1)">子传父，鸿蒙写法</button>
        <button @click="emits('updateAge', age + 1)">子传父，改年龄</button>
        <button>子传父，改所有</button>
    </div>
</template>

<style scoped></style>